<template>
  <view class="w-full min-h-screen bg-gray-100 details">
    <!-- 顶部状态栏 - 使用NutUI Tab组件 -->
    <nut-tabs
      v-model="activeTab"
      title-scroll
      title-gutter="10"
      @change="changeTab"
    >
      <nut-tab-pane
        v-for="tab in tabs"
        :key="tab.id"
        :pane-key="tab.id"
        :title="tab.name"
      >
      </nut-tab-pane>
    </nut-tabs>

    <view>
      <items :item="item" v-for="item in plist" :key="item.id" />
    </view>

    <view>
      <empty v-if="plist.length==0"/>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
// import { NutTabs, NutTab } from "@nutui/nutui-taro";
import { IconFont } from "@nutui/icons-vue-taro";
import Taro, { getCurrentInstance } from "@tarojs/taro";
import Empty from "@/components/empty/index.vue";
import items from "./components/items.vue";
import http from "@/utils/http";

// 修改tabs为对象列表格式
const tabs = ref([
  { name: "全部订单", id: 0 },
  { name: "未布施", id: 1 },
  { name: "待发货", id: 2 },
  { name: "待收货", id: 3 },
]);

const plist = ref([]);

console.log("plist ======", plist.value)

// 从路由参数获取初始选中的tab
const activeTab = ref(0);
const instance = getCurrentInstance();

Taro.usePullDownRefresh(() => {
  loadData()
  setTimeout(() => {
    Taro.stopPullDownRefresh();
  }, 1000);
});

onMounted(() => {
  const routerParams = instance.router?.params;
  console.log("routerParams", routerParams)
  activeTab.value = Number(routerParams.id) || 0;
  loadData();
  //   const initialTabId = parseInt(routerParams?.id || 0);
  //   const foundTab = tabs.value.find((tab) => tab.id === initialTabId);
  //   if (foundTab) {
  //     activeTab.value = foundTab;
  //     console.log("当前选中Tab ID:", activeTab.value.id);
  //   }
});

function loadData() {
  http
    .post("/index.php/index/api/index", {
      Func: "getOrders",
      data: {
        status: activeTab.value,
        startpage: 1,
        pagesize: 10,
      },
    })
    .then((res) => {
      console.log("res --data", res);
      if(res.error == 0){
        plist.value = res.data;
      }
    });
}

const changeTab = (e) => {
  console.log("e", activeTab.value);
    // activeTab.value = tabs.value.find((tab) => tab.id === e.paneKey);
    loadData()
};
</script>

<style lang="scss">
/* 样式调整 - 适配NutUI组件 */
.details {
  /* 自定义NutUI Tab样式 */
  .nut-tabs .nut-tab {
    padding: 0; /* 调整标签间距 */
  }

  .nut-tab-pane {
    height: 0 !important;
    padding: 0 !important;
  }
  .nut-tabs__titles-item {
    width: fit-content !important;
  }
}
</style>
